<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo1</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.search {
				position: relative;
				width: 178px;
				margin: 100px;
			}
			.con {
				display: none;
				position: absolute;
				/* 定位在文本框上方 */
				top: -40px;
				width: 171px;
				border: 1px solid rgba(0,0,0,0.2);
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				padding: 5px 0;
				font-size: 18px;
				line-height: 20px;
				color: #333333;
			}
			/* 在某元素之前插入内容 */
			.con::before{
				content: '';
				width: 0;
				height: 0;
				position: absolute;
				top: 28px;
				left: 18px;
				border: 8px solid #000;
				border-style: solid dashed dashed;
				 border-color: #fff transparent transparent;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			window.addEventListener('load',()=>{
				document.querySelector('.jd_text').addEventListener('keyup',(e)=>{
					// console.log(e.target.value)
					// this.apply(document.querySelector('.jd_text'))
					// console.log(this)
					if(e.target.value.trim()){
						document.querySelector('.con').style.display = 'block';
						 // console.log(this)//指windows对象
						document.querySelector('.con').innerHTML = document.querySelector('.jd_text').value.trim();
					}else{
						document.querySelector('.con').style.display = 'none';
					}
				});
				document.querySelector('.jd_text').addEventListener('blur',(e)=>{
					document.querySelector('.con').style.display = 'none'
					// console.log(Boolean(e.target.value.trim()))
					if(!e.target.value.trim()){
						document.querySelector('.jd_text').value = "";
					}
				});
				document.querySelector('.jd_text').addEventListener('focus',(e)=>{
					if(e.target.value.trim()){
						document.querySelector('.con').style.display = 'block';
					}
				})
			})
		</script>
		<div class="search">
			<div class="con">123</div>
			<input type="text" class="jd_text" placeholder="请输入快递单号">
		</div>
	</body>
</html>
